<template>
<div class="header-container">
    <div class="header" >   
            <div class="icon-back" v-on:click="back"></div>        
            <div class="title">我的收藏</div>
            <div class="bj" v-show="isShow"  @click="msg">编辑</div> 
            <div class="bj" v-show="!isShow"  @click="msg">取消</div>            
    </div>   
    <div class="box">
            <div class="bjtp"></div>
            <div class="txt">有时候，喜欢的商品，不收藏就错过了</div>
    </div>
    <div >
    <div class="content" :class="{'active':isShow}"  v-for="item in scList" :key="item.id">
        <div class="circle">
            <span class="circle-detail" @click="choose(item.id,chooseList)" :class="{'choose':chooseList.indexOf(item.id)>-1}"></span>
            
        </div>
        <div class="information">
                <div class="specific_detail">
                <router-link :to="{path:'/detail',query:{id:item.id}}">
                     <img :src="imgUrl[item.type]" alt="" >
                    <div class="info ">
                        <div class="row first">
                            <span class="gs" v-show="item.is_counteroffer==1"></span>
                            <span class="hj" v-if="item.is_counteroffer==2"></span>
                            <span class="name">{{item.united}}</span>
                            <span class="level">{{item.level}}级</span>
                            <span class="service">{{item.area1}}-{{item.area2}}</span>
                            <span class="platform"> 
                                <i class="apple" v-if="item.source==2"></i>
                                <i class="android" v-if="item.source==1"></i>
                            </span>
                        </div>
                        <div class="row">
                            <span class="all_point">总评分:{{item.score_total}}</span>
                            <span class="role_point">人物评分:{{item.score_role}}</span>
                        </div>
                        <div class="row">
                            <span class="red" v-for="signitem in sp(item.sign)" :key="signitem">
                                {{signitem}}
                                </span>
                            <span class="sc">{{item.star}}人收藏</span>
                        </div>
                    </div>
                </router-link>
            </div>
              
        </div>

    </div>
    </div>
    <div :class="{activechoose:chooseList.length>0}" @click="cancel()">
        <span v-show="chooseList.length>0">取消收藏</span>
    </div>
    

</div>
</template>
<script>
import axios from "axios";
import Pictures from "@/pages/common/Pictures";
export default {
    name:'CollectionHeader',
    data(){
        return{
            isShow:true,
            chooseList:[],
            scList:[],
            signList:[],
            StarContent:'',
            imgUrl:Pictures.imgUrl
        }
    },
    methods:{
        back(){
            this.$router.go(-1);//返回上一层
        },
        msg(){
            this.isShow =!this.isShow
        },
        choose(item,chooseList){
            let arrIndex=chooseList.indexOf(item);
            if(arrIndex>-1){
           chooseList.splice(arrIndex,1)
            }else{      
           chooseList.push(item)   
           
            }
        },
        sp(){
            return function(sign){
                return sign.split(';');
            };
        },
        cancel(){
            console.dir();
            for(var i=0;i<this.chooseList.length;i++){
                var id=this.chooseList[i];
                 axios.post("http://81.68.253.206:8081/role/unstar",{shop_id:id},{
                        headers: {
                            'token': localStorage.getItem("UserToken") 
                            }
                }).then(res=>{});
            }
            //调用完成后 执行清空数组，不要在头上清空。  chooseList是用来绑定选中的样式 还没有清空角色列表
            this.chooseList.splice(0,this.chooseList.length);
            //清空角色列表
            this.scList.splice(0,this.scList.length);
        }

    },
    mounted(){
        var param={type:this.$route.query.type};
        axios.post("http://81.68.253.206:8081/page/getShopRoleList",
            param,
            {
                headers: {
                'token': localStorage.getItem("UserToken") }
            } 
        ).then(res=>{
            if(res.data&&res.data.data&&res.data.status){
                this.scList=res.data.data;
            }           
        })      
    }
    
}
</script>
<style lang="scss" scoped>
.header {
    position: relative;
    width: 100%;
    height: rem(130);
    min-width: 320px;
    max-width: 750px;
    background-color: #fff;
    .title{
        width: 100%;
        height: rem(130);
        line-height: rem(130);
        text-align: center;
        font-size: rem(45);
        font-weight: 700;
    }    
    .bj {
        position: absolute;
        top: rem(30);
        right: rem(40);
        width: auto;
        height: rem(60);
        font-size: rem(50);;
        cursor: pointer;
    }
    .icon-back{
        position: absolute;
        top: rem(40);
        left: rem(40);
        width: rem(60);
        height: rem(60);
        background: url(../../../assets/imgs/back.svg) no-repeat 50% 50%;
        background-size: auto 100%;
        cursor: pointer;
    }
}
.box{
    display: none;
    position: relative;
 width: 100%;
 height: rem(500);
 .bjtp{
       position: absolute;
        top: rem(330);
        left: 50%;
        margin-left: rem(-138);
         width: rem(276);
        height: rem(276);
        background: url(../../../assets/imgs/icon-empty-collect.png) no-repeat 50% 50%;
        background-size: auto 100%;
    }
    .txt{
        width: 100%;
        color: #888;
        position: absolute;
        top: rem(620);
        text-align: center;
        font-size: rem(40);

    }
}
.content{
    display: flex;
    width: 100%;
    padding: 0 rem(30);
    margin-top: rem(15);
    background-color: #fff;
    .circle{
        position: relative;
        width: rem(120);
        .circle-detail{
            position: absolute;
            top: rem(90);
            left: rem(10);
            width: rem(60);
            height: rem(60);
            border-radius: 50%;
            border: 1px solid #888;
            z-index: 2;
        }
        .choose{
            position: absolute;
            top: rem(92);
            left: rem(12);
            width: rem(60);
            height: rem(60);
            background: url(../../../assets/imgs/choose.png) no-repeat 50% 50%;
            background-size: auto 100%;

        }
    }
    .information{
        flex: 1;
    }
}
.active{
    width: 100%;
    .circle{
        display: none;
    }
    .info{
        width: 100%;
    }
}
.activechoose{
    position: fixed;
    bottom: 0;       
    min-width: 320px;
    max-width: 750px;
    width: 100%;
    line-height: rem(130);
    height: rem(130);
    color: #fff;
    background-color: #e74e4b;
    text-align: center;
    font-size: rem(50);

}
.specific_detail {
            position: relative;
            width: 100%;
            height:rem(260);
            line-height: rem(60); 
            padding:rem(40) 0;          
            border-top: 1px solid #f1f1f1;
            border-bottom: 1px solid #f1f1f1;
            img {
                float: left;
                margin-right: rem(30);
                width: rem(175);
                height: rem(175);
                border-radius: rem(15);
                border-top: 1px solid #f1f1f1;
            }
            .info {
                float: left;
                width: 60%;
                height: rem(175);

                .row {
                    width: 100%;
                    height:rem(60);
                    line-height: rem(60);
                .gs{
                        display: inline-block;
                        margin-bottom: rem(-10);
                        width: rem(50);
                        height: rem(50);
                        background: url(../../../assets/imgs/gong.svg) no-repeat 50% 50%;
                        background-size: auto 100%;
                }
                .hj{
                        display: inline-block;
                        margin-bottom: rem(-10);
                        width: rem(50);
                        height: rem(50);
                        background: url(../../../assets/imgs/hai.png) no-repeat 50% 50%;
                        background-size: auto 100%;
                    }
                    .name{
                    font-size: rem(45);
                    border-right: 1px solid #f1f1f1;
                    padding-right: rem(15);
                    margin-left: rem(15);
                    }
                    .level {
                    color: #888;
                    margin-left: rem(10);
                    font-size: rem(35);
                    }
                    .all_point{
                    color: #888;
                    font-size: rem(35);
                    }
                    .role_point{
                    color: #888;
                    font-size: rem(35);
                    }
                    .red {
                        color: #e74e4b;
                        font-size: rem(35);
                        border: 1px solid #e74e4b;
                        border-radius: 3px;
                        margin-right: rem(10);
                    }
                    .service {
                        position: absolute;
                        right: rem(50);
                        color: #888;
                        font-size: rem(35);
                    }

                    .platform {
                        position: absolute;
                        right: 0px;
                        margin-top: rem(5);
                    }

                    .apple {
                        display: inline-block;
                        width: rem(50);
                        height: rem(50);
                        background: url(../../../assets/imgs/apple.svg) no-repeat 50% 50%;
                        background-size: auto 100%;
                    }
                    .android{
                        display: inline-block;
                        width: rem(45);
                        height: rem(45);
                        background: url(../../../assets/imgs/android1.svg) no-repeat 50% 50%;
                        background-size: auto 100%;
                    }
                    .price {
                        position: absolute;
                        right: 0px;
                        font-size: rem(50);
                        font-weight: 700;
                        color: #e74e4b;
                    }

                    .sc {
                        position: absolute;
                        right: 0px;
                        color: #888;
                        font-size: rem(35);
                    }

                }
            }
        }
     
    






</style>